<template>
  <div>
    <ol class="breadcrumb">
      <li class="breadcrumb-item">系统管理</li>
      <li class="breadcrumb-item active">权限管理</li>
    </ol>
    <div class="bg-white px-3 mx-3">
      <div class="layer-loading" v-show="loading"><i></i><i></i><i></i></div>

      <div class="mb-3">
        <div class="text-muted py-3 pb-0">系统权限列表.</div>
        <router-link to="/permission/new"><span class="img img-xxs rounded bg-blue">┼</span> 新增权限</router-link>
      </div>

      <tree :treenodes="treenodes"></tree>
    </div>
  </div>
</template>
<script>
  import tree from './tree.vue'
  import {Permission} from '../../resources'
  import swal from 'sweetalert'

  export default {
    data: () => ({
      loading: false,
      treenodes: []
    }),
    beforeRouteEnter(to, from, next) {
      Permission.tree().then(response => {
        next(vm => {
          vm.treenodes = response.data
          vm.$nextTick(() => vm.$emit('loaded'))
        })
      })
    },
    methods: {
      toggle(method, event) {
        var $this = $(event.target)
        $this.addClass('active').siblings().removeClass('active')
        this.$treetable.treetable(method)
      },
      del (id, index) {
        var vm = this
        swal({
          type: 'warning',
          title: '您确定?',
          text: '删除的记录将不能恢复!',
          showCancelButton: true,
          cancelButtonText: '取消',
          confirmButtonText: '是的, 我要删除!',
          confirmButtonColor: '#DD6B55',
          showLoaderOnConfirm: true,
          closeOnConfirm: false
        }, confirmed => {
          if (confirmed) {
            vm.loading = true
            Permission.delete(id).then(response => {
              vm.loading = false
              if (response.data.success) {
                swal('已删除!', '您指定的记录已被删除.', 'success')
                return vm.items.splice(index, 1)
              }
              swal('删除失败!', response.data.msg, 'error')
            }, response => {
              console.log(response)
              swal('操作失败', response.data.msg, 'error')
              vm.loading = false
            }).catch(error => {
              swal('操作失败', error, 'error')
              vm.loading = false
            })
          }
        })
      }
    },
    components: {tree}
  }
</script>